import React, { useEffect, useState } from 'react'
import * as echarts from 'echarts';
import { Button } from "antd"
import { CloudUploadOutlined } from '@ant-design/icons';
import style from '../index.module.scss'
// import '../../../../../node_modules/echarts/map/js/china'
// import geoJson from 'echarts/map/json/china.json';
// // import { geoCoordMap, provienceData } from "./geo";

export default function Echarts4() {
    const [echart4, setMain] = useState('')
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        // legend: {
        //     data: ['Evaporation', 'Precipitation', 'Temperature']
        // },
        xAxis: [
            {
                type: 'category',
                // boundaryGap: false,
                data: ['02-01', '02-04', '02-08', '02-12', '02-16', '02-20', '02-24', '02-28'],
                // axisPointer: {
                //     type: 'shadow'
                // }
            }
        ],
        yAxis: [
            {
                type: 'value',
            },
        ],
        series: [
            {
                type: 'bar',
                data: [23, 18, 7, 12, 7, 8, 3, 4]
            },
        ]
    };
    useEffect(() => {
        var node = document.getElementById('echart4')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echart4 !== "") {
        var myChart = echarts.init(echart4);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }

    return (
        <div>
            <div className={style.pre_title}>
                <p>贷款金额分布</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <div id="echart4"></div>
        </div>
    )
}